<template>
	<view>
		<!-- <u-popup :show="show" @close="onClose" mode="center" custom-style="width:90%;border-radius:24rpx">
		  <view class="auth-box" @tap.stop.prevent="doNoting">
		    <view class="dialog-title">身份认证</view>
		    <view class="dialog-iptbox">
		      <view class="dialog-img">
		        <image :src="staticBaseUrl + '/static/image/my/head.png'" mode="widthFix"></image>
		      </view>
		      <input type="text" class="ipt-username" value="" placeholder="填写姓名" @blur="bindNameChange" />
		    </view>
		    <view class="dialog-iptbox">
		      <view class="dialog-img">
		        <image :src="staticBaseUrl + '/static/image/my/card-1.png'" mode="widthFix"></image>
		      </view>
		      <input type="text" class="ipt-username" value="身份证" :disabled="true" />
		    </view>
		    <view class="dialog-iptbox">
		      <view class="dialog-img">
		        <image :src="staticBaseUrl + '/static/image/my/card-2.png'" mode="widthFix"></image>
		      </view>
		      <input type="idcard" class="ipt-username" value="" placeholder="填写18位身份证号" maxlength="18"
		        @blur="bindCardIdChange" />
		    </view>
		    <view class="dialog-iptbox">
		      <view class="dialog-img">
		        <image :src="staticBaseUrl + '/static/image/my/card-3.png'" mode="widthFix"></image>
		      </view>
		      <input type="number" class="ipt-username" value="" placeholder="本人银行卡号" maxlength="19"
		        @blur="bindCardChange" />
		    </view>
		    <view class="errorBox" v-if="showError">
		      <view class="error-img">
		        <image :src="staticBaseUrl + '/static/image/my/error.png'" mode="widthFix"></image>
		      </view>
		      <view class="error-info">{{ errInfo }}</view>
		    </view>
		    <view class="dialog-btnbox">
		      <view class="btn-cancel" @tap.stop.prevent="onClose">取消</view>
		      <view class="btn-confirm" @tap.stop.prevent="authConfirm">确定</view>
		    </view>
		  </view>
		</u-popup> -->
		<u-popup :show="showPhone" @close="onClose" mode="center" 
		custom-style="width:90%;border-radius:24rpx;top: -264rpx;">
			<view class="phone-view">
				<view class="dialog-iptbox">
					<view class="dialog-img">
					  <image :src="staticBaseUrl + '/static/image/my/head.png'" mode="widthFix"></image>
					</view>
					<input type="number" class="ipt-username" :value="util.phoneHidden(phone)" style="flex: 1" disabled
					 placeholder="手机号码" @input="bindPhoneChange" />
					<view class="authCode" :style="'color:' + (codeDisabled ? '#FAB7B4' : '#F35C56')"
					@tap.stop.prevent="getMsgCode">{{messageText}}</view>
				</view>
				<view class="dialog-iptbox">
					<view class="dialog-img">
					  <image :src="staticBaseUrl + '/static/image/my/head.png'" mode="widthFix"></image>
					</view>
					<input type="number" class="ipt-username" :value="authCode" placeholder="验证码" @input="bindAuthCodeChange" />
				</view>
				<view class="dialog-btnbox">
					<view class="btn-cancel" @tap.stop.prevent="onClose">取消</view>
					<view class="btn-confirm" @tap.stop.prevent="toLogin" 
					:style="'color:' + (authDisabled ? '#FAB7B4;opacity: 0.6' : '#fff;opacity: 1')">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script module="util" lang="wxs" src="../../utils/util.wxs"></script>
<script>
	const app = getApp();
	import util from '../../utils/util';
	import {
		http
	} from '@/utils/commonRequest.js';
	import {
		staticBaseUrl
	} from '@/utils/constant.js';
	export default {
		name:"toAuth",
		data() {
			return {
				staticBaseUrl,
				show: false,
				/** 去认证上传参数 */
				authParams: {
				  custName: '',
				  certTp: '1',
				  certNo: '',
				  cardNo: ''
				},
				userInfo: {},
				memberInfo: null,
				showPhone: false,
				phone: '',
				messageText: '获取验证码',
				codeDisabled: false,
				authDisabled: true,
				authCode: ''
			};
		},
		props: {
			// show: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		methods: {
			// 关闭弹框
			onClose: function() {
			  this.show = false;
				this.showPhone = false;
				this.authCode = '';
				this.authDisabled = true;
			},
			
			openShow: function(data) {
				console.log('111',data)
				// this.$refs.toAuth.openShow()
				this.show = true
				this.showPhone = true;
				this.phone = data.phone
				this.phoneEnc = data.phoneEnc
			},
			
			doNoting() {
			  console.log('占位：函数 doNoting 未声明');
			},
			
			bindAuthCodeChange:function(e) {
				this.authCode = e.detail.value;
				this.authDisabled = !(this.phone && this.authCode)
			},
			
			bindPhoneChange: function(e){
				this.phone = e.detail.value;
				this.authDisabled = !(this.phone && this.authCode)
			},
			
			/** 弹窗输入框信息获取 */
			bindNameChange: function(e) {
			  this.authParams.custName = e.detail.value;
			},
			
			bindCardIdChange: function(e) {
			  this.authParams.certNo = e.detail.value; 
				// if (this.authParams.certNo !== this.data.userInfo.card_id) {
			  //   this.setData({
			  //     showError: true
			  //   })
			  //   e.detail.value = ''
			  // }
			},
			
			bindCardChange: function(e) {
			  this.authParams.cardNo = e.detail.value;
			},
			
			/** 确认提交弹窗事件 */
			authConfirm: function() {
				/** 验证弹窗信息 */
				let nameReg = /^[\u4E00-\u9FA5A-Za-z]+$/; //名字正则
		
				let cardIdReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //身份证号正则
		
				let cardNoReg = /^\d{12,19}$/;
		
				if (!nameReg.test(this.authParams.custName)) {
					uni.showToast({
						icon: 'error',
						title: '姓名格式错误'
					});
					return;
				}
		
				if (!cardIdReg.test(this.authParams.certNo)) {
					uni.showToast({
						icon: 'none',
						title: '身份证号格式错误，请重新输入'
					});
					return;
				}
		
				if (!cardNoReg.test(this.authParams.cardNo)) {
					uni.showToast({
						icon: 'none',
						title: '银行卡号格式错误，请重新输入'
					});
					return;
				} 
				var params = {
					memberId: this.memberInfo.id,
					name: this.authParams.custName,
					idType: '00',
					idNo: this.authParams.certNo,
					cardNo: this.authParams.cardNo
					// memberId: '1073917992896606208',
					// name: '测试姓名',
					// idType: '00',
					// idNo: '362321199801304521',
					// cardNo: '622234234234324234'	
				};
				var that = this;
				console.log('参数=1=params=',params,this.memberInfo)
				http.get('mtBankInfo/userAuth', {params: params})
					.then((res) => {
						if (res.data.code == '200') {
							uni.showToast({
								title: '身份验证成功',
								icon: 'success'
							});
							that.show = false
							// that.approve = '1'
							// that.getDetailMemberInfo()
						} else {
							that.showError = true
							that.errInfo = res.data.msg
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
				
			// 获取短信验证码
			getMsgCode: function(){
				if(this.codeDisabled){
					return;
				}
				
				let that = this;
				let phone = that.phoneEnc;
				// if (util.isEmpty(phone) || !util.verifyPhone(phone)) {
				// 	util.tips('请输入正确的手机号！');
				// 	return;
				// }
				
				this.codeDisabled = true;
				
				let params = { phone: phone }
				uni.showLoading({
					title: '发送中'
				});
				// /mtBankInfo/sendCodeMt
				http.get('/mtPointMall/sendMtMessage', {params: params})
					.then((res) => {
						res = res.data;
						uni.hideLoading();
						if ('200' == res.code) {
							util.message('验证码已发送');
							let second = 30;
							let a = setInterval(function() {
								second--;
								if (second == 0) {
									that.messageText = '获取验证码'
									that.codeDisabled = false
									clearInterval(a);
								} else {
									that.messageText = second + 'S后获取'
								}
							}, 1000);
						}else {
							util.message(res.msg);
							that.codeDisabled = false
						}
					}).catch((err) => {
						uni.hideLoading();
						that.codeDisabled = false
						util.message('获取验证码失败')
						console.log('验证码err',err)
				})
			},	
			
			// 
			toLogin: function(){
				if(this.authCode){
					this.$emit("toCommit",this.phoneEnc, this.authCode)
				}else{
					util.tips('请输入验证码');
				}
			},
		}
	}
</script>

<style>
	.phone-view{
		padding: 50rpx 34rpx;
		box-sizing: border-box;
	}
	
	.authCode{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		word-break: keep-all;
		padding-right: 10rpx;
	}
	
	.auth-box {
    padding: 64rpx 54rpx;
    border-bottom: 1rpx solid #eaeaea;
    box-sizing: border-box;
    /* border-radius: 24rpx; */
  }

  .dialog-title {
    text-align: center;
    color: #000;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .dialog-iptbox {
    display: flex;
    position: relative;
    padding-left: 16rpx;
    font-size: 28rpx;
    height: 96rpx;
    background-color: #eee;
    border-radius: 24rpx;
    align-items: center;
    margin-bottom: 16rpx;
  }

  .dialog-img {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
  }

  .dialog-img image {
    width: 100%;
  }
	
	.ipt-username{
	  width: 80%
	}
	
	.errorBox {
	  margin-top: 40rpx;
	  display: flex;
	}
	
	.error-img {
	  width: 32rpx;
	  height: 32rpx;
	  margin-right: 14rpx;
	}
	
	.error-img image {
	  width: 100%;
	}
	
	.error-info {
	  color: #666;
	  font-size: 26rpx;
	  font-weight: bold;
	}
	
	.dialog-btnbox {
	  padding: 40rpx 0rpx;
	  display: flex;
	  justify-content: space-between;
	}
	
	.btn-cancel,
	.btn-confirm {
	  width: 260rpx;
	  height: 84rpx;
	  background-color: #fff;
	  color: #666;
	  font-size: 34rpx;
	  line-height: 84rpx;
	  border: 1rpx solid #eaeaea;
	  border-radius: 42rpx;
	  text-align: center;
	}
	
	.btn-confirm {
	  background: linear-gradient(140deg, #ffc996 0%, #ed176e 100%);
	  color: white;
	}
</style>